<%@ page language="java" pageEncoding="UTF-8" %>
<%@ include file="/pages/common/taglibs.jsp" %>

<jsp:useBean id="JSONRPCBridge" scope="session" class="org.jabsorb.JSONRPCBridge" />
<jsp:useBean id="jabsorbService" scope="session" class="com.ivo.jabsorb.JabsorbService" />

<%
	JSONRPCBridge.registerObject("jabsorbService", jabsorbService);
%>

<html>
	<head>
	  	<title>表单页面样式管理[Model Design]</title>
		<%@ include file="/pages/common/extjs.jsp" %>
		<link rel="stylesheet" type="text/css" href="${ctx }/styles/ext-button.css" rel="stylesheet" />
		
		<style type="text/css">
			.ux-icon-combo-icon {
	            background-repeat: no-repeat;
	            background-position: 0 50%;
	            width: 18px;
	            height: 14px;
	        }
	        .ux-icon-combo-input {
	            padding-left: 25px;
	        }
	        .x-form-field-wrap .ux-icon-combo-icon {
	            top: 3px;
	            left: 5px;
	        }
	        .ux-icon-combo-item {
	            background-repeat: no-repeat ! important;
	            background-position: 3px 50% ! important;
	            padding-left: 24px ! important;
	        }
		</style>
	</head>
	<body>
		<!-- import JSONRPC JS -->
	    <script type="text/javascript" src="${ctx }/scripts/jsonrpc.js"></script>
	    <!-- import EXTJS Modules -->
		<script type="text/javascript" src="${ctx }/ext-3.2/ux/CheckColumn.js"></script>
		<script type="text/javascript" src="${ctx }/ext-3.2/ux/Ext.ux.IconCombo.js"></script>
		<script type="text/javascript" src="${ctx }/ext-3.2/ux/SearchField.js"></script>
		<!-- import Customer Modules -->
		<script type="text/javascript" src="${ctx }/pages/pdm/TemplateManagement.js"></script>
		
		<script type="text/javascript">
			window.basePath = "${ctx }";
						
			var ROWSPANS = [["1","单元格"],["4","一行"]];
			
			Ext.BLANK_IMAGE_URL = "${ctx }/ext-3.2/resources/images/default/s.gif";
			
			Ext.onReady(function(){
				Ext.QuickTips.init();
			    Ext.form.Field.prototype.msgTarget = 'side';
			    
			    var tmplPnl = new TemplatePanel({id: 'tmplPanel'});
			    
			    new Ext.Viewport({
				    title: 'Sheet Model Design',
					layout: 'border',
					items: [{
						region: 'center',
						id: 'tmplUsedAttrList',
						title: "页面元素列表",
						border: true,
						iconCls: 'attribute_list',
						layout: 'fit',
						items: new UsedAttrsGrid()
					},{
						region: 'south',
						title: "元素属性",
						iconCls: 'element_edit',
						border: false,
						frame: false,
						layout: 'fit',
						collapsible: true,
						collapseMode: 'mini',
						margins: '0 0 0 0',
						height:	200,
						items: [new AttributeInfoPanel({id:'attributeInfo'})]
					}, tmplPnl
					]
				});
				
				tmplPnl.tmplGridPnl.load();
			});			
		</script>
		<div id=property></div>
		<div id=selected>
			<input id=_selected_tmpl_id name=_selected_tmpl_id type=hidden value="" />
		</div>
	</body>
	
</html>